<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="other/myCssReset.css">
  <style>
    .containeriboxtext1{
      width: 100%;
    }
    .bx1{
      width: 1000px;
      margin: auto;
      display: flex;
      flex-direction: column;
      
     
    }
    .box1head{
      width:900px;
      height: 50px;
      margin: auto;
      padding-top: 40px;
      padding-bottom: 20px;
    }
    .box1head>span{
      font-size: 25px;
      font-weight: 600;
      line-height: 50px;

    }
    .box1head>:nth-child(1)
  {
    color: #1d1d1f;
  }
  .box1head>:nth-child(2)
  {
    color: #6e6e73;
  }
  .box1card{
    width: 1900px;
    height: 480px;
    display: flex;
    justify-content: space-between;
    z-index: -1;/********/
  }
  .box1card>div{
    z-index: -1;
    width: 300px;
    height: 480px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 7px 7px 15px #ddd;
    transition:transform 0.5s,box-shadow 0.5s;/********/
  }
  .box1card>div:hover{
    box-shadow: 0px 4px 10px #1D1D1F;
      transform: scale(1.05);
    
  }
  .box1cardimgbox{
    padding-top:20px;
    width: 300px;
    height: 300px;
    margin: auto;
  }
  .box1cardimgbox img{
    text-align: center;
    width:100%;
  }
  .ulbox{
    width: 150px;
    margin: auto;
    display: flex;
    justify-content: space-around;
  }
  .ulbox li{
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }
  .ulbox li:nth-child(1)
  {
    background-color:orange;
  }
  .ulbox li:nth-child(2)
  {
    background-color:pink;
  }
  .ulbox li:nth-child(3)
  {
    background-color:blueviolet;
  }
  .ulbox li:nth-child(4)
  {
    background-color:#6e6e73;
  }
  .ulbox li:nth-child(5)
  {
    background-color:black;
  }
  .ulbox li:nth-child(6)
  {
    background-color:#6e6e73;
  }
  .box1cardtext1{
    padding-top: 10px;
    width: 230px;
    margin: auto;
  }
  .box1cardtext1>:nth-child(1)
  {
    font-size: 12px;
    color: orange;
    padding-bottom: 10px;
  }
  .box1cardtext1>:nth-child(2)
  {
    font-size: 18px;
    padding-bottom: 20px;
    font-weight: 600;
    color: #1d1d1f;
  }
  .lfrtbox{
    width: 100vw;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .lfrtbox>div{
    width: 50px;
    height: 50px;
    position:absolute;
    border-radius: 50%;
    background: #6e6e73;
    text-align: center;
    line-height: 50px;
    top: 40%;
    color:#fff;
    opacity: 1;
    cursor: pointer;
    opacity: 0.7;
    z-index: 10;
    
  }
  .lfrtbox>:nth-child(2)
  {
    right: 0%;
  }
  .lfrtbox:hover div{
    opacity: 0.8;
  }
  .box1card{
   transition: 1s;
  }
  .containeriboxtext1:hover .lfrtbox{
    opacity: 0.8;
  }
  </style>
</head>
<body>
  <div class="containeriboxtext1">
    <div class="lfrtbox">
      <div id="lt"><</div>
      <div id="gt">></div>
    </div>
    <div class="bx1">
      <div class="box1head">
        <span>各种配件，</span><span>款款必备，和你的设备绝配。</span>
      </div> 

     
        <div class="box1card" id="box1card1">
          <div>
            <div class="box1cardimgbox">
              <img src="./pic/MM283.jpg" alt="" >
            </div>
            <ul class="ulbox">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="box1cardtext1">
              <p>新款</p>
              <p>iPhone 13 专用 MagSafe 硅胶保护壳 - 灰粉色</p>
              <p>RMB 399</p>
            </div>
          </div>
  
         <div>
          <div class="box1cardimgbox">
            <img src="./pic/MME73.jpg" alt="" >
          </div>
          <ul class="ulbox">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <div class="box1cardtext1">
            <p>新款</p>
            <p>AirPods (第三代)</p>
            <p>RMB 1399</p>
          </div>
          </div>
  
          <div>
   <div class="box1cardimgbox">
              <img src="./pic/airpods-max-select-silver-202011.jpg" alt="" >
            </div>
            <ul class="ulbox">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="box1cardtext1">
              <p>新款</p>
              <p>AirPods Max - 银色</p>
              <p>RMB 4399</p>
            </div>
          </div>
  
          <div>
            <div class="box1cardimgbox">
              <img src="./pic/MM1Q3.jpg" alt="" >
            </div>
            <ul class="ulbox">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="box1cardtext1">
              <p>新款</p>
              <p>iPhone 13 Pro MagSafe 专用 硅胶保护壳 - 山
                衫绿色</p>
              <p>RMB 499</p>
            </div>
          </div>
  
          <div>
            <div class="box1cardimgbox">
              <img src="./pic/MM0Q3.jpg" alt="" >
            </div>
            <ul class="ulbox">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="box1cardtext1">
              <p>新款</p>
              <p>iPhone 专用 MagSafe 皮革卡包 - 金褐色</p>
              <p>RMB 449</p>
            </div>
          </div>
          
          <div>
            <div class="box1cardimgbox">
              <img src="./pic/ML5L3ref.jpg" alt="" >
            </div>
            <ul class="ulbox">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="box1cardtext1">
              <p>新款</p>
              <p>45 毫米黍米色编织单圈表带 - 7 号</p>
              <p>RMB 779</p>
            </div>
          </div>
      </div>
      <script>
        var lt = document.getElementById('lt');
        var gt = document.getElementById('gt');
        var box1card = document.getElementById('box1card1');
        var sum = 0;
        var s = '';
        lt.onclick = function(){
          sum -= 300;
          box1card.style.transform =`translateX(${sum}px)`;
          if(sum<=-1200)
          {
            sum=300;
          }
          console.log(sum);
        }
        gt.onclick = function(){
          
          sum += 300;
          box1card.style.transform =`translateX(${sum}px)`;
          if(sum<=1800)
          {
            sum=0;
          }
          console.log(sum);
        }
        
      </script>
    </div>
  </div>
</body>
</html>